<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/17
  Time: 15:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <title>web通讯录主页</title>
</head>
<body>
<h1>欢迎使用web通讯录</h1>
<form id="fm">
    <p>
        <input type="text" name="name" placeholder="请输入姓名">
        <input type="text" name="tel" placeholder="请输入电话">
        <input type="button" id="addTel" value="新增">
    </p>
</form>
<table border="1px" cellspacing="0" cellpadding="10px">
    <tr>
        <th>姓名</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${data}" var="u">
        <tr>
            <td>${u.name}</td>
            <td>${u.tel}</td>
            <td>
                <a href="edit.do?pid=${u.id}">修改</a>
                <a href="del.do?pid=${u.id}">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $("#addTel").click(function () {
        var data = $("#fm").serialize();
        $("#addTel").attr('disable','disable');
        $.post(
            "add.do",data,function (res) {
                console.log(res);
                if (res=="success"){
                    alert("新增成功");
                    $("#fm").find("[name=name]").val('');  // 设置input值为空.
                    $("#fm").find("[name=tel]").val('');
                    $("#addTel").removeAttr("disable");
                }
            }
        );
    });
</script>
</body>
</html>
